<template>
    <view-box style="background:#f4f4f4">
        <div class="back-border" v-for="(item, index) in list" :key="index">
                <div class="timu-exam">
                    {{item.order}}、{{item.subject}}
                </div>
                <div class="margin-topacs">
                    <p class="show">
                        <label>
                            <input :name="'obj' + index" type="radio" v-model="checkedValue[index]" @change="get_radio_value(index)"  :value="item.result_1"/>
                            <span></span>
                           {{item.answer_1}}
                        </label>
                    </p>
                    <p class="show">
                        <label>
                            <input :name="'obj' + index" type="radio" v-model="checkedValue[index]" @change="get_radio_value(index)" :value="item.result_2"/>
                            <span></span>
                           {{item.answer_2}}
                        </label>
                    </p>
                </div>
            </div>
            <div class="bottom-pos" v-if="statuss === 0 && tdui > 0.00">
              <x-button class="button-post" @click.native="generateOrder">提交(<span style="font-size:13px;">支付金额{{sorts.price}}</span>)</x-button>
            </div>
            <div class="bottom-pos" v-if="statuss === 1">
              <x-button class="button-post" @click.native="postsuc">提交(<span style="font-size:13px;">团队已购买</span>)</x-button>
            </div>
            <div class="bottom-pos" v-if="statuss === 0 && tdui <= 0.00">
              <x-button class="button-post" @click.native="postsuc">提交(<span style="font-size:13px;">免费评估</span>)</x-button>
            </div>
        <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading">
            <load-more slot="no-more" :show-loading="false" tip="到底了" background-color="#fbf9fe"></load-more>
            <empty slot="no-results" tips="暂时没有相关内容"></empty>
        </infinite-loading>
    </view-box>
</template>
<script>
import { ViewBox, Box, Flexbox, FlexboxItem, Group, Cell, CellBox, XHeader, XButton } from 'vux'
export default {
  components: {
    ViewBox,
    Box,
    Flexbox,
    Group,
    Cell,
    CellBox,
    FlexboxItem,
    XHeader,
    XButton
  },
  data () {
    return {
      list: [],
      all_list: [],
      checkedValue: [],
      sorts: '',
      statuss: 0,
      tdui: 0
    }
  },
  mounted () {
    this.details()
  },
  methods: {
    details () {
      console.log(this.rid)
      this.$http.get('/subjectHome/' + parseInt(this.$route.query.sort)).then(response => {
        this.sorts = response.data.sort
        this.statuss = response.data.status
        this.tdui = response.data.sort.price
        console.log(this.tdui)
      }).catch(error => {
        console.log(error)
      })
    },
    infiniteHandler ($state) {
      this.$http.get('/subjectHome/' + this.$route.query.sort, {
        params: {
          page: this.list.length / 20 + 1,
          page_size: 20
        }
      }).then((response) => {
        console.log(response.data.data.data.length)
        if (response.data.data.data.length) {
          this.list = this.list.concat(response.data.data.data)
          $state.loaded()
          if (!response.data.next_page_url) {
            $state.complete()
          }
        } else {
          $state.complete()
        }
      })
    },
    get_radio_value: function (index) {
      // 获取当前radio当前值
      console.log((index + 1) + '题' + this.checkedValue)
      this.all_list[index] = this.checkedValue[index]
    },
    postsuc () {
      if (confirm('确定要提交')) {
        this.$http.post('/assessment/' + this.$route.query.sort, {
          assessment: this.all_list
        }).then(response => {
          this.$vux.toast.show({
            text: '提交成功',
            type: 'text'
          })
          this.$router.push({ path: '/assessment' })
          console.log(response)
        }).catch(error => {
          console.log(error)
        })
      } else {
        return false
      }
    },
    generateOrder () {
      this.loading = true
      this.$http.post('/subjectBuy', {sort_id: this.$route.query.sort}).then((response) => {
        // 订单金额为零时，不需要支付
        //   console.log(response.data.order)
        this._pay(response.data.order.id)
      }).catch((error) => {
        this.loading = false
        console.log(error)
      })
    },
    save () {
      if (confirm('确定要提交')) {
        this.$http.post('/assessment/' + this.$route.query.sort, {
          assessment: this.all_list
        }).then(response => {
          this.$vux.toast.show({
            text: '提交成功',
            type: 'text'
          })
          this.$router.push({ path: '/assessment' })
          console.log(response)
        }).catch(error => {
          console.log(error)
        })
      } else {
        return false
      }
    },
    _pay (id) {
      let json = {}
      let callpay = () => {
        if (typeof WeixinJSBridge === 'undefined') {
          if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
          }
        } else {
          onBridgeReady()
        }
      }
      let onBridgeReady = () => {
        WeixinJSBridge.invoke('getBrandWCPayRequest', json, (res) => {
          if (res.err_msg === 'get_brand_wcpay_request:ok') {
            this.$router.replace('/myassessment')
            this.save()
            this.getMyYiSort()
          } else {
            this.getMyYiSort()
            this.$router.replace('/myassessment')
          }
        })
      }
      this.$http.get('/pay/Subject/wxpay-' + id).then((response) => {
        console.log(response.data)
        json = response.data
        callpay()
      }).catch((error) => {
        console.log(error)
      })
    }
  }
}
</script>
<style scoped>
.back-border{
    width: 96%;
    height: auto;
    margin-left: 2%;
    background: #fff;
    border-radius: 8px;
    margin-top: 15px;
}
 .timu-exam{
    width: 92%;
    height: auto;
    line-height: 20px;
    border-bottom: 1px solid #f4f4f4;
    margin-left: 4%;
    padding-top: 10px;
    font-size: 14px;
    padding-bottom: 10px;
}
.margin-topacs{
    margin-top: 10px;
}
.show{ width:100%;height: 40px; color: #bababa;font-size: 14px;}
.show input[type="radio"]{display:none;}
.show input[type="radio"] + span{border:1px solid #CCCCCC;border-radius:19px;width:19px; height:19px; float:left; margin-top:0px;margin-right:10px;margin-left: 10px;}
.show input[type="radio"]:checked + span{border:1px solid #519DF3;border-radius:20px;background:url(./images/yi.png) no-repeat;background-size: 20px 20px;}
label{width: 100%;height: 40px;display: inline-block;}
.bottom-pos{
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 45px;
  background: #fff;
  z-index: 10;
}
.button-post{
  width: 80%;
  margin-left: 10%;
  background: #32B6C6;
  border:#32B6C6 solid 1px;
  color: #fff;
  height: 35px;
  line-height: 35px;
  margin-top: 5px;
}
</style>